<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改菜品数据</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../css/oksub.css">
    <script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
</head>
<style>
    img {
        width: 100px;
        height: 100px;
    }
</style>
</style>
<body>
<div class="ok-body" id="app">
    <!--form表单-->
    <form class="layui-form ok-form" lay-filter="filter">

        <div class="layui-form-item">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="text" name="id" id="id" v-model="id" autocomplete="off"
                       class="layui-input"
                       lay-verify="required" readonly>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">菜名</label>
            <div class="layui-input-block">
                <input type="text" name="food_name" id="food_name" v-model="food_name" placeholder="请输入菜名"
                       autocomplete="off"
                       class="layui-input"
                       lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">菜品类型</label>
            <div class="layui-input-block">
                <!--                <input type="text" name="login_name" placeholder="请输入真实姓名" autocomplete="off" class="layui-input"-->
                <!--                       lay-verify="required">-->
                <select id="foodtype_id" name="foodtype_id" v-model="foodtype_id" autocomplete="off" class="layui-input"
                        lay-verify="required">
                    <option value="1">凉菜</option>
                    <option value="2">热菜</option>
                    <option value="3">饮料</option>
                    <option value="4">甜点</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input type="price" name="price" id="price" v-model="price" placeholder="请输入价格" autocomplete="off"
                       class="layui-input"
                       lay-verify="required">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">折扣</label>
            <div class="layui-input-block">
                <!--                <input type="text" name="discount" placeholder="请输入" autocomplete="off" class="layui-input"-->
                <!--                       lay-verify="required">-->

                <select id="discount" name="discount" id="discount" v-model="discount" autocomplete="off"
                        class="layui-input"
                        lay-verify="required">
                    <option value="1">不打折</option>
                    <option value="0.95">九五折</option>
                    <option value="0.9">九折</option>
                    <option value="0.8">八折</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">菜品简介</label>
            <div class="layui-input-block">
                <input type="text" name="remark" id="remark" v-model="remark" placeholder="请输入菜品简介"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <img :src="img">
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-input-block">
                <input type="file" name="file" id="file" placeholder="请选择图片" accept="image/*"
                       lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-input-block">
                <div id="imageContainer">

                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <input class="layui-btn" value="修改" @click="update">
            </div>
        </div>


    </form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const fileInput = document.getElementById('file');
        const imageContainer = document.getElementById('imageContainer');
        fileInput.addEventListener('change', function (event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    imageContainer.innerHTML = '';
                    imageContainer.appendChild(img);
                };
                reader.readAsDataURL(file);
            } else {
                imageContainer.innerHTML = '';
            }
        });
    });

    // 获取 URL 中的参数
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

    let initData;

    function initForm(data) {
        let jsonString = JSON.stringify(data);
        initData = JSON.parse(jsonString);
    }

    layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
        let form = layui.form;
        let laydate = layui.laydate;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        okLoading.close();
        form.val("filter", initData);
        laydate.render({elem: "#birthday", type: "datetime"});
        form.verify({
            birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
        });
            // form.on("submit(edit)", function (data) {
            //     okUtils.ajax("../../food.action?op=update", "post", data.field
            //         , true).done(function (response) {
            //         console.log(response);
            //         okLayer.greenTickMsg("修改成功", function () {
            //             parent.layer.close(parent.layer.getFrameIndex(window.name));
            //         });
            //     }).fail(function (error) {
            //         console.log(error)
            //     });
            //     return false;
            // });
        })

        var app = new Vue({
            el: "#app",
            data: {
                food: [],
                food_name: '',
                foodtype_id: '',
                price: '',
                discount: '',
                remark: '',
                id: '',
                img: '',
            },
            methods: {
                update() {
                    // Create a FormData object to handle file and text data
                    var formData = new FormData();
                    const file = document.getElementById("file").files[0];
                    // Append text data
                    formData.append("food_name", this.food_name);
                    formData.append("foodtype_id", this.foodtype_id);
                    formData.append("price", this.price);
                    formData.append("discount", this.discount);
                    formData.append("remark", this.remark);
                    formData.append("id", this.id);
                    // Append file data
                    formData.append("file", file);
                    // Send POST request using Axios
                    axios.post("../../food.action?op=update",formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }).then(result => {
                        var jsonmodel = result.data;
                        if (jsonmodel.code === 1) {
                            alert("修改成功");
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        } else {
                            alert("修改失败");
                        }
                    })
                }
            },
            mounted() {
                var id = getUrlParameter("id");
                var params = new URLSearchParams();
                params.append("id", id);
                //this.id = id;
                axios.post("../../food.action?op=getfood", params).then(result => {
                    var jsonmodel = result.data;
                    if (jsonmodel.code === 1) {
                        this.id = jsonmodel.obj.id;
                        this.food_name = jsonmodel.obj.food_name;
                        this.foodtype_id = jsonmodel.obj.foodtype_id;
                        this.price = jsonmodel.obj.price;
                        this.discount = jsonmodel.obj.discount;
                        this.remark = jsonmodel.obj.remark;
                        this.img = jsonmodel.obj.img;
                    }
                })
            }
        })
</script>
</body>
</html>
